<template>
  <div class="section">
    <div class="title-box">商品列表</div>
    <div class="centent-box">

      <div class="centent-top flex">
        <el-button type="primary" style="height:32px;padding: 0 15px;"><i class="el-icon-folder-add"></i> 新建商品
        </el-button>
        <el-input class="centent-top-input flex" placeholder="请输入活动标题搜索" suffix-icon="el-icon-search" v-model="search">
        </el-input>
      </div>

      <div class="centent-table">
        <el-table :data="tableData" height="100%" style="width: 100%">
          <el-table-column prop="title" label="活动标题" width="250" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="报名截止时间" align="center">
          </el-table-column>
          <el-table-column prop="access" label="访问人数" align="center">
          </el-table-column>
          <el-table-column prop="toSignUp" label="报名人数" align="center">
          </el-table-column>
          <el-table-column prop="subscribe" label="预约直播人数" align="center">
          </el-table-column>
          <el-table-column prop="money" label="已发放奖金额" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>下架</el-dropdown-item>
                  <el-dropdown-item command="1">生成二维码</el-dropdown-item>
                  <el-dropdown-item>统计数据</el-dropdown-item>
                  <el-dropdown-item>查看评论</el-dropdown-item>
                  <router-link to="/goodsEditor">
                    <el-dropdown-item divided>编辑</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="微信扫码查看" :visible.sync="dialogVisible" width="360px">
          <div class="flex-d">
            <img style="width:300px;height:300px;object-fit: cover;"
              src="" />
            <div class="flex" style="width:300px">
              <el-input placeholder="请输入内容" v-model="copyVal" clearable ref="copyInput" id="copyInput"
                contentEditable=true>
              </el-input>
              <el-button type="text" @click="copy()">复制</el-button>
            </div>
          </div>

        </el-dialog>
      </div>
      <div class="centent-pagination flex">
        <el-pagination :page-sizes="[2, 10, 20, 40]" :page-size="100" layout="sizes, prev, pager, next" :total="3">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped src="./goods.less">

</style>
<script>

export default {
  name: 'goods',

  data() {
    return {
      search: '',
      tableData: [{
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }, {
        title: '星颜艺美医疗美容 开业直播首秀',
        status: '上架',
        endTime: '2022-08-29 20:00',
        access: '0',
        toSignUp: '0',
        subscribe: '0',
        money: '0'
      }],
      dialogVisible: false,
      copyVal: ''
    }
  },
  methods: {
    handleCommand(command) {
      let _this = this
      if (command == 1) {
        _this.dialogVisible = !_this.dialogVisible
      }
    },
    copy() {
      let msg = this.copyVal
      const save = function (e) {
        e.clipboardData.setData('text/plain', msg)
        e.preventDefault() // 阻止默认行为
      }
      document.addEventListener('copy', save) // 添加一个copy事件
      document.execCommand('copy') // 执行copy方法
      this.$message({ message: '复制成功', type: 'success' })
    },
  }
}
</script>
